<template>
    <div class="all">
      <div class="left" ref="menuWrapper">
        <div>
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :title="item.name"
              v-for="(item,key) in goods"
              :key="key"
              @click="selectMenu(key)"
            />
          </van-sidebar>
        </div>
      </div>
      <div class="rightt">
        <div class="right" ref="foodsWrapper">
          <div>
            <div class="content1 food-list-hook" v-for="(item,key) in goods" :key="key">
              <div class="top">{{item.name}}</div>
              <div class="content2" v-for="(it,k) in item.foods" :key="k" @click="endit(it.name)">
                <div class="bottom">
                  <div class="bo">
                    <img :src="it.image" alt />
                    <div class="ec">
                      <div class="left">
                        <p>{{it.name}}</p>
                        <p>{{it.description}}</p>
                        <p>月售1132份&emsp;&emsp;好评率100%</p>
                        <p>
                          <span>￥{{it.price}}</span>
                          <span>{{it.oldPrice}}</span>
                        </p>
                      </div>

                      <van-icon name="add" @click.stop="getCart(it,k)" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <div class="shop">
        <div class="top">
          <p>购物车</p>
          <p>清空</p>
        </div>
        <ul class="bottom">
          <li v-for="(item,key) in $store.state.cart" :key="key">
            <p>{{item.name}}</p>
            <van-stepper
              theme="round"
              button-size="50"
              disable-input
              @plus="caradd(item.name)"
              @minus="carnum(item.name)"
            ></van-stepper>
          </li>
        </ul>
      </div>
      <div id="footer">
        <div>
          <p>
            <van-icon name="shopping-cart" />
          </p>
        </div>
        <div>
          <span>￥{{$store.getters.count}}</span>
          <span>另需配送费￥4元</span>
        </div>
        <div>￥20起送</div>
      </div>
    </van-popup>
    </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      arr: [], //选中的数据
      goods:[],
      // valueStepper: 1
      show: false,
      activeKey: 0,
      listHeight: [], //高度
      scrollY: 0 //初始滚动距离
    };
  },
  computed: {
    currentIndex() {
      //计算当前分类下标,根据条件计算产生一个结果findindex查找满足条件的下标,没找到返回
      let index = this.listHeight.findIndex((item, key) => {
        //如果滚动距离=左侧列表当前高度并且小于下一项高度
        return (
          this.scrollY >= item && this.scrollY < this.listHeight[index + 1]
        );
      });
      return index;
    }
  },
  methods: {
    endit(name) {
      this.$router.push("/endit?name=" + name);
    },
    //购物车添加
    getCart(it, key) {
      console.log(it, key);
      var cart = this.$store.state.cart;
      var index = cart.findIndex((item, key) => {
        return item.name == it.name;
      });
      if (index == -1) {
        //不存在
        var obj = {
          price: it.price,
          name: it.name,
          number:1
        };
        this.$store.commit("addcart", obj);
        console.log(obj);
      } else {
        this.$store.commit("addnum", index);
      }
      this.show = true;
    },
    // 加
    caradd(name) {
      this.arr = this.$store.state.cart;
      var index = this.arr.findIndex((item, key) => {
        return item.name == name;
      });
      console.log(index);
      this.$store.commit("addnum", index);
    },
    //减
    carnum(name) {
      console.log(name);
      this.arr = this.$store.state.cart;
      var index = this.arr.findIndex((item, key) => {
        return item.name == name;
      });

      this.$store.commit("addcut", index);
    },
    //  设置两边列表可以滚动
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 2
      });
      //    右侧表绑定滑动监听
      this.foodsScroll.on("scroll", pos => {
        //  获取每次滚动的值 绝对值
        this.scrollY = Math.abs(Math.round(pos.y));
      });
      //  右侧列表绑定滑动结束监听
      this.foodsScroll.on("scrollEnd", pos => {
        this.scrollY = Math.abs(Math.round(pos.y));
        console.log(this.scrollY);
      });
    },
    calculateHeight() {
      // 获取 所有左侧列表li  class 为 food-list-hook ul设置ref
      let foodList = this.$refs.foodsWrapper.getElementsByClassName(
        "food-list-hook"
      );

      let height = 0;
      this.listHeight.push(height);
      Array.prototype.slice.call(foodList).forEach(i => {
        height += i.clientHeight;
        this.listHeight.push(height);
      });
    },
    //  点击左侧列表 右侧列表滑动到指定位置
    selectMenu(key) {
      console.log(key);
      let foodList = this.$refs.foodsWrapper.getElementsByClassName(
        "food-list-hook"
      );
      //   scrollToElement可以滑动到指定位置
      this.foodsScroll.scrollToElement(foodList[key], 300);
      //    第一个参数对应的食品列表
      //  第二个参数为滑动 动画时长
    }
  },
  mounted() {
    //   这里用到一个定时器 等待数据渲染完毕 执行该方法 不然不能滑动 如果是真实数据 这两个方法放在this.$nextTick()里面
    //因为没有真实数据 只能用本地数据模拟下
    setTimeout(() => {
      this.initScroll();
      this.calculateHeight();
    }, 20);
  },
   created(){
     this.$http.get("/api/data.json").then((res)=>{
         console.log(res)
         this.seller=res.data.seller
         this.goods=res.data.goods
     })
 }
};
</script>
<style lang="scss" scoped>
  .all {
    overflow: auto;
    width: 100%;
    height: 100%;
    border-top: 2px solid #e5e5e5;
    display: flex;
    .left {
      width: 160px;
      height: 100%;
      div {
        width: 100%;
        height: 100%;
        .van-sidebar {
          height: 100%;
          width: 100%;
          font-size: 24px;
          color: #07111b;
          a {
            width: 100%;
            text-align: center;
            height: 108px !important;
            line-height: 78px;
            font-size: 24px;
          }
          .van-sidebar-item--select::before {
            position: none !important;
            content: none !important;
          }
        }
      }
    }
    .rightt {
      flex: 1;
      background: white;
    }
    .right {
      width: 100%;
      height: 100%;
      overflow: auto;
      div {
        width: 100%;
        overflow: auto;
        .content1 {
          width: 100%;
          //   height: 270px;
          display: flex;
          flex-direction: column;
          .top {
            background: #f3f5f7;
            width: 100%;
            height: 60px;
            border-top: 2px solid #e5e5e5;
            border-left: 3px solid #e5e5e5;
            color: #9aa0a6;
            font-size: 24px;
            line-height: 50px;
            padding-left: 25px;
          }
        }
        .content2 {
          width: 100%;
          .bottom {
            width: 100%;

            display: flex;
            padding: 0 30px;
            justify-content: space-between;
            .bo {
              height: 100%;
              width: 100%;
              padding: 36px 0;
              display: flex;
              border-bottom: 2px solid #d9dde1;
              justify-content: space-between;
              img {
                width: 115px;
                height: 115px;
              }
              .ec {
                position: relative;
                margin-left: 20px;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                .left {
                  width: 298px;
                  p {
                    &:nth-of-type(1) {
                      font-size: 28px;
                      margin-bottom: 16px;
                    }
                    &:nth-of-type(2) {
                      font-size: 20px;
                      margin-bottom: 16px;
                      color: rgb(147, 153, 159);
                    }
                    &:nth-of-type(3) {
                      font-size: 20px;
                      margin-bottom: 12px;
                      color: rgb(147, 153, 159);
                    }
                    &:nth-of-type(4) {
                      span {
                        &:nth-of-type(1) {
                          font-size: 28px;
                          color: red;
                          font-weight: normal;
                          margin-right: 16px;
                        }
                        &:nth-of-type(2) {
                          font-size: 20px;
                          color: rgb(147, 153, 159);
                        }
                      }
                    }
                  }
                }
                .van-icon {
                  position: absolute;
                  font-size: 40px;
                  color: blue;
                  bottom: 0;
                  right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
#footer {
  position: relative;
  width: 100%;
  height: 104px;
  background: #141d27;
  padding-left: 36px;
  div {
    &:nth-of-type(1) {
      padding-top: 12px;
      padding-bottom: 16px;
      position: absolute;
      bottom: 0;
      width: 88px;
      height: 116px;
      background: #141d27;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #039ed9;
        .van-icon {
          color: white;
          font-size: 50px;
        }
      }
    }
    &:nth-of-type(2) {
      margin-left: 124px;
      height: 100%;
      display: flex;
      align-items: center;
      span {
        &:nth-of-type(1) {
          color: #919396;
          font-size: 26px;
          font-weight: 700;
          margin-right: 20px;
        }
        &:nth-of-type(2) {
          line-height: 60px;
          height: 60px;
          padding-left: 24px;
          border-left: 2px solid #2c343d;
          font-size: 22px;
          color: #8b8d90;
        }
      }
    }
    &:nth-of-type(3) {
      width: 210px;
      height: 100%;
      background: #2b333b;
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 24px;
      color: #919396;
      line-height: 102px;
      text-align: center;
    }
  }
}
.shop {
  width: 100%;
  height: 542px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    height: 80px;
    padding: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f7;
    border-bottom: 1px solid #e3e6e8;
    p {
      &:nth-of-type(1) {
        font-size: 28px;
        color: black;
        font-weight: 500;
      }
      &:nth-of-type(2) {
        font-size: 24px;
        color: #5dbee6;
        font-weight: 700;
      }
    }
  }
  .bottom {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 26px;
    li {
      width: 100%;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f7f7f7;
      p {
        font-size: 28px;
        font-weight: 700;
      }
    }
  }
}
</style>

